<!-- 绿色通道 - 患者列表 - 医疗记录 主界面 -->
<template>
  <div id="box" class="basic" style="width: 100%;">
    <div style="clear: both;" />
    <div style="width:100%;text-align: center;">
      <!--左侧树结构与操作按钮-->
      <div style="float: left; width: 270px;padding: 20px 0px;background-color: white;height: 715px;overflow:auto; ">
        <el-button size="mini" type="primary" @click="New(send)">新增
        </el-button>
        <el-button size="mini" type="primary" @click="updatedata(updatebase)">修改
        </el-button>
        <el-button size="mini" type="primary" @click="getbasedata()">刷新
        </el-button>
        <el-tree
          ref="tree"
          :highlight-current="true"
          style="padding: 10px 10px;margin-top: 20px;border-top: 1px solid #E0E0E0;width: 100%;"
          :data="basedata"
          :props="defaultProps"
          default-expand-all
          @node-click="handleNodeClick"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>
              <i class="fa fa-file-text-o" style="color: orange;" />
              <span style="margin-left: 5px;">{{ node.label }}</span>
            </span>
          </span>
        </el-tree>
      </div>
      <!--右侧表格-->
      <div style="float: right; width: calc(100% - 280px);padding: 20px;background-color: white;">
        <span>医院编码：</span>
        <el-input v-model="hospitalId" placeholder="医院编码" style="width: 15%;margin: 10px 20px 20px 0px;" disabled />
        <span>医院名称：</span>
        <el-input v-model="hospitalName" placeholder="医院名称" style="width: 15%;margin-right: 20px;" disabled />
        <Row style="background-color: white;width: 100%">
          <i-col span="24" class="demo-tabs-style1" style="margin-top: -10px">
            <Tabs type="card" style="margin-bottom: 20px;">
              <Tab-Pane label="科室信息">
                <el-table
                  highlight-current-row
                  height="545"
                  :data="tableData"
                  border
                  style="width: 100%;"
                  @row-click="getvalue"
                >
                  <el-table-column label="科室编码" prop="id" align="center" />
                  <el-table-column label="科室名称" prop="name" align="center" />
                  <el-table-column label="所属机构" prop="hospitalId" align="center" />
                </el-table>
              </Tab-Pane>
              <Tab-Pane label="人员信息">
                <el-table
                  border
                  highlight-current-row
                  height="545"
                  :data="userData.slice((userPage-1)*usersize,userPage*usersize)"
                  @row-click="getvalue"
                >
                  <el-table-column label="用户名" prop="phoneNum" />
                  <el-table-column label="姓名" prop="name" />
                  <el-table-column label="人员类型" prop="userType" />
                  <el-table-column label="当前科室" prop="departmentName" />
                  <el-table-column label="所属机构" prop="id" />
                  <el-table-column label="状态" prop="state" />
                </el-table>
                <!--                            <el-pagination @size-change="handleUser" @current-change="handleCurrentUser"-->
                <!--                                           :current-page="userPage" :page-sizes="[5, 10, 20, 40]" :page-size="usersize"-->
                <!--                                           layout="total, sizes, prev, pager, next, jumper" :total="userData.length">-->
                <!--                            </el-pagination>-->
              </Tab-Pane>
            </Tabs>
          </i-col>
        </Row>
      </div>
    </div>
    <!--新增基本代码类别对话框-->
    <el-dialog
      title="新增医院"
      :visible.sync="centerDialogVisibleBase"
      width="40%"
      center
      style="text-align: center;"
      :before-close="closeaddbase"
    >
      <el-form
        ref="addbase"
        :model="send"
        :rules="addbaserules"
        label-width="100px"
        style="width: 100%;border-bottom: 1px solid #F0F0EE;border-top: 1px solid #F0F0EE;"
      >
        <!--            <el-form-item label="上级医院编码" prop="parentId">-->
        <!--                <el-input v-model="send.parentId" :disabled="true" placeholder="上级医院" style="width: 80%;"></el-input>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="上级医院名称" prop="parentName">-->
        <!--                <el-input v-model="send.parentName" :disabled="true" placeholder="上级医院" style="width: 80%;"></el-input>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="医院编码" prop="id">-->
        <!--                <el-input v-model="send.id" placeholder="医院编码" style="width: 80%;"></el-input>-->
        <!--            </el-form-item>-->
        <el-form-item label="医院名称" prop="name">
          <el-input v-model="send.name" placeholder="医院名称" style="width: 80%;" />
        </el-form-item>
        <!--            <el-form-item label="医院级别" prop="hosgrade">-->
        <!--                <el-select v-model="send.hosgrade" placeholder="请选择" style="width: 80%;">-->
        <!--                    <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id">-->
        <!--                    </el-option>-->
        <!--                </el-select>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="医院状态" prop="enabled">-->
        <!--                <el-select v-model="send.enabled" placeholder="请选择" style="width: 80%;">-->
        <!--                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">-->
        <!--                    </el-option>-->
        <!--                </el-select>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="行政区码" prop="areaCodeCounty">-->
        <!--                <el-input v-model="send.areaCodeCounty" placeholder="行政区码" style="width: 80%;"></el-input>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="科大机构编码" prop="orgCode">-->
        <!--                <el-input v-model="send.orgCode" placeholder="科大机构编码" style="width: 80%;"></el-input>-->
        <!--            </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleClose('addbase')">取 消</el-button>
        <el-button size="medium" type="primary" @click="add(send,'addbase')">确 定</el-button>
      </span>
    </el-dialog>
    <!--修改医院对话框-->
    <el-dialog
      title="修改医院"
      :visible.sync="centerDialogVisibleupdateDaima"
      width="30%"
      center
      style="text-align: center;"
      :before-close="closeupdatevalue"
    >
      <el-form
        ref="updateref"
        :model="updatebase"
        :rules="updatebaserules"
        label-width="100px"
        style="width: 100%;border-bottom: 1px solid #F0F0EE;border-top: 1px solid #F0F0EE;"
      >
        <!--            <el-form-item label="上级医院编码" prop="parentId">-->
        <!--                <el-input v-model="updatebase.parentId" :disabled="true" placeholder="上级医院"-->
        <!--                          style="width: 80%;"></el-input>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="上级医院名称" prop="parentName">-->
        <!--                <el-input v-model="updatebase.parentName" :disabled="true" placeholder="上级医院"-->
        <!--                          style="width: 80%;"></el-input>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="医院编码" prop="id">-->
        <!--                <el-input v-model="updatebase.id" :disabled="true" placeholder="医院编码"-->
        <!--                          style="width: 80%;"></el-input>-->
        <!--            </el-form-item>-->
        <el-form-item label="医院名称" prop="name">
          <el-input v-model="updatebase.name" placeholder="医院名称" style="width: 80%;" />
        </el-form-item>
        <!--            <el-form-item label="医院级别" prop="hosgrade">-->
        <!--                <el-select v-model="updatebase.hosgrade" placeholder="请选择" style="width: 80%;">-->
        <!--                    <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id">-->
        <!--                    </el-option>-->
        <!--                </el-select>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="医院状态" prop="enabled">-->
        <!--                <el-select v-model="updatebase.hospitalstate" placeholder="请选择" style="width: 80%;">-->
        <!--                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">-->
        <!--                    </el-option>-->
        <!--                </el-select>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="行政区码" prop="areaCodeCounty">-->
        <!--                <el-input v-model="updatebase.areaCodeCounty" placeholder="行政区码" style="width: 80%;"></el-input>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="科大机构编码" prop="orgCode">-->
        <!--                <el-input v-model="updatebase.orgCode" placeholder="科大机构编码" style="width: 80%;"></el-input>-->
        <!--            </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose('updateref')">取 消</el-button>
        <el-button type="primary" @click="updatedatavalue(updatebase,'updateref')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<!--    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="急救进程" name="process">
        <process v-if="activeName == 'process'" :checkrowdata="mrdata" />
      </el-tab-pane>

      <el-tab-pane v-if="consultation==false" label="基本信息" name="info">
        <info v-if="activeName == 'info'" :checkrowdata="mrdata" />
      </el-tab-pane>
    </el-tabs> -->

<script>
import process from '@/views/green-channel/process.vue'
import info from '@/views/green-channel/info.vue'

export default {
  // 由主页面(父组件) 接收来的, 选择项的数据
  components: { process, info },
  props: ['mrdata'],
  data() {
    return {

      // 树形结构数据，存在children中，暂无父级数据
      basedata: [],
      // 树子节点
      defaultProps: {
        children: 'children',
        // 显示的数据
        label: 'hospitalName'
      },
      hospitalId: '',
      hospitalName: '',
      hospitallevel: '',
      hospitalstate: '',
      areaCodeCounty: '',
      orgCode: '',
      hosgrade: '',
      options: [
        /* {
                    value: 'all',
                    label: '全部'
                },*/
        {
          value: 'true',
          label: '正常'
        },
        {
          value: 'false',
          label: '禁用'
        }
      ],
      // 科室类型
      choseoption: [],
      tableData: [],
      currentPage: 1, // 初始页
      pagesize: 10, //    每页的数据
      // 查医院的
      curPage: 1, // 初始页
      pageSize: 10, //    每页的数据
      // 查人员的
      userData: [],
      userPage: 1, // 初始页
      usersize: 10, //    每页的数据
      // 新增医院弹窗控制
      centerDialogVisibleBase: false,
      // 修改医院弹窗控制
      centerDialogVisibleupdateDaima: false,
      send: {
        parentId: 'root',
        parentName: '',
        id: '',
        name: '',
        hosgrade: '',
        enabled: '',
        areaCodeCounty: '',
        orgCode: ''
      },
      addbaserules: {
        id: [{
          required: true,
          message: '请输入医院编码',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入医院名称',
          trigger: 'blur'
        }]
      },
      updatebase: {
        parentId: '',
        parentName: '',
        id: '',
        name: '',
        hosgrade: '',
        enabled: '',
        hospitalstate: '',
        areaCodeCounty: '',
        orgCode: ''
      },
      updatebaserules: {
        name: [{
          required: true,
          message: '请输入医院名称',
          trigger: 'blur'
        }],
        enabled: [{
          required: true,
          message: '请选择医院状态',
          trigger: 'blur'
        }]
      },
      // 点击左侧树时获得的数据
      getbase: {
        hospitalId: '0',
        type: '',
        hospitalName: ''
      },
      // 医院等级
      levelList: [],
      // 人员类型
      roletype: [],
      // 科室类型
      alldepts: []
    }
  },
  computed: {},
  updated() {},
  created() {
    // this.getalltypes();
    this.getbasedata()
    this.getdictionarydata()
    // this.levelDropdown();
    // this.gettype();
    // this.getalldepts();
    // this.getroles();
  },
  mounted() {},
  methods: {

    // 得到树数据方法
    getbasedata() {
      this.getbase = {
        hospitalId: '0',
        type: '',
        hospitalName: ''
      }
      const that = this
      $.ajax({
        method: 'get',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'Authorization': 'Bearer ' + localStorage.getItem('access_token')
        },
        url: '/getHosTreeList',
        data: {
          token: localStorage.getItem('access_token'),
          start: that.curPage - 1,
          length: that.pageSize,
          parentId: 'root'
        }
      }).then(
        function(res) {
          res = JSON.parse(res)
          that.basedata = res
          console.log(res)
        })
    },
    // 得到表格数据方法        传值：空或基本代码，查询全部                按照 type和code查询
    getdictionarydata(getbase) {
      console.log(getbase)
      // if (this.id == '' || this.id == undefined) {
      //     this.tableData = [];
      if (getbase == '' || getbase == undefined) {
        this.tableData = []
      } else {
        const that = this
        // debugger;
        var d = {
          start: that.currentPage - 1,
          length: that.pagesize * 10000,
          id: getbase,
          token: localStorage.getItem('access_token'),
          hospitalId: getbase
        }
        $.ajax({
          method: 'POST',
          headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Authorization': 'Bearer ' + localStorage.getItem('access_token')
          },
          url: '/hospitalId',
          data: JSON.stringify(d)
        }).then(
          function(res) {
            res = JSON.parse(res).data
            console.log('部门信息', res)
            // for (let i = 0; i < res.length; i++) {
            //     for(let x = 0;x<that.basedata.length;x++){}
            //     if(res[i].hospitalId == that.basedata[x].hospitalId){}
            // //     for (let y = 0; y < that.options.length; y++) {
            // //         if (res[x].deptType == that.options[y].code) {
            // //             res[x].dept = that.options[y].name;
            // //         }
            // //     }
            // //     if (res[x].deptFlag == 1) {
            // //         res[x].deptFlagname = "是"
            // //     } else if (res[x].deptFlag == 0) {
            // //         res[x].deptFlagname = "否"
            // //     }
            // }
            that.tableData = res
          })
      }
    },
    // 获得所有角色信息
    getroles(getbase) {
      if (getbase == '' || getbase == undefined) {
        this.tableData = []
      } else {
        const that = this
        var d = {
          start: that.userPage - 1,
          length: that.usersize,
          id: getbase,
          hospitalId: getbase,
          token: localStorage.getItem('access_token')
        }
        $.ajax({
          method: 'POST',
          headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Authorization': 'Bearer ' + localStorage.getItem('access_token')
          },
          url: '/users1',
          data: JSON.stringify(d)
        }).then(
          function(res) {
            res = JSON.parse(res).data
            console.log('角色信息', res)
            for (let i = 0; i < res.length; i++) {
              if (res[i].enabled == true) {
                res[i].state = '正常'
              } else if (res[i].enabled == false) {
                res[i].state = '禁用'
              }
              for (let a = 0; a < that.roletype.length; a++) {
                if (res[i].persontype == that.roletype[a].code) {
                  res[i].persontypename = that.roletype[a].name
                }
              }
              for (let a = 0; a < that.alldepts.length; a++) {
                if (res[i].deptId == that.alldepts[a].deptId) {
                  res[i].deptName = that.alldepts[a].deptName
                }
              }
            }
            that.userData = res
          })
      }
    },
    handleUser(size) {
      this.usersize = size
    },
    // 分页换页
    handleCurrentUser(userPage) {
      this.userPage = userPage
    },
    // 单击左侧树获得数据方法
    handleNodeClick(data) {
      console.log(data)
      this.getvaluedata = {}
      this.getbase.type = data.type
      this.getbase.hospitalName = data.hospitalName
      this.getbase.id = data.id
      this.hospitalId = data.hospitalId
      this.getdictionarydata(this.hospitalId)
      this.getroles(this.hospitalId)
      this.hospitalName = data.hospitalName
      this.areaCodeCounty = data.areaCodeCounty
      this.orgCode = data.orgCode
      if (data.parentId == '' || data.parentId == undefined) {
        this.send.parentId = 'root'
        this.send.parentName = 'root'
        this.updatebase.parentId = 'root'
      } else {
        this.send.parentName = data.name
        this.send.parentId = data.parentId
        this.updatebase.parentId = data.parentId
      }
      // this.updatebase.parentId = data.parentId;
      this.updatebase.id = data.hospitalId
      this.updatebase.name = data.hospitalName
      this.updatebase.hosgrade = data.hosgrade
      this.updatebase.areaCodeCounty = data.areaCodeCounty
      this.updatebase.orgCode = data.orgCode
      this.hosgrade = data.hosgrade
      if (data.enabled = true) {
        this.hospitalstate = '正常'
        this.updatebase.hospitalstate = '正常'
        this.updatebase.enabled = true
      } else if (data.enabled = false) {
        this.hospitalstate = '禁用'
        this.updatebase.hospitalstate = '禁用'
        this.updatebase.enabled = false
      }
      for (let i = 0; i < this.basedata.length; i++) {
        // 取到根目录名
        if (this.basedata[i].key == data.parentId) {
          // console.log(this.basedata[i].title)
          this.updatebase.parentName = this.basedata[i].title
        }
        if (this.basedata[i].children != null) {
          for (let y = 0; y < this.basedata[i].children.length; y++) {
            // 取到第二层目录名
            if (this.basedata[i].children[y].key == data.parentId) {
              // console.log(this.basedata[i].children[y].title)
              this.updatebase.parentName = this.basedata[i].children[y].title
            }
            // 取得第三层目录名
            if (this.basedata[i].children[y].children != null) {
              for (let x = 0; x < this.basedata[i].children[y].children.length; x++) {
                if (this.basedata[i].children[y].children[x].key == data.parentId) {
                  // console.log(this.basedata[i].children[y].children[x].title)
                  this.updatebase.parentName = this.basedata[i].children[y].children[x].title
                }
              }
            }
          }
        }
      }
    },
    getvalue(data) {
      this.getbase = data
    },
    // 分页尺寸改变
    handleSizeChange(size) {
      this.pagesize = size
    },
    // 分页换页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
    },
    closeaddbase() {
      this.$nextTick(() => {
        this.handleClose('addbase')
      })
    },
    closeupdatevalue() {
      this.$nextTick(() => {
        this.handleClose('updatevalue')
      })
      this.getdictionarydata(this.getbase)
      this.getvaluedata = {}
    },
    // 新增弹窗
    New(send) {
      if (send.parentId == '' || send.parentId == '0') {
        appConfig.warningAlert('还没有选择上级医院')
      } else {
        this.centerDialogVisibleBase = true
      }
    },
    // 新增医院
    add(send, formname) {
      const data = send
      data.hospitalName = send.name
      data.hospitalId = send.id
      console.log(data)
      data.token = localStorage.getItem('access_token')
      this.$refs[formname].validate((valid) => {
        if (valid) {
          const v = this
          $.ajax({
            method: 'post',
            headers: {
              'Content-Type': 'application/json; charset=utf-8',
              'Authorization': 'Bearer ' + localStorage.getItem('access_token')
            },
            url: '/savehospital',
            data: JSON.stringify(data)
          }).then(function(res) {
            console.log('新增医院', res)
            if (res != undefined) {
              v.send = {
                code: '',
                name: '',
                hospitalId: ''
              }
              v.centerDialogVisibleBase = false
              appConfig.okAlert('添加成功')
              v.getbasedata()
            }
          }
          )
        } else {
          return false
        }
      })
    },
    handleClose(formName) {
      this.centerDialogVisibleupdateDaima = false
      this.centerDialogVisibleBase = false
    },
    // 打开修改医院方法
    updatedata(updatebase) {
      console.log(updatebase)
      if (updatebase.parentId == '' || updatebase.parentId == '0') {
        appConfig.warningAlert('还没有选择修改对象')
      } else {
        this.centerDialogVisibleupdateDaima = true
      }
    },
    // 修改医院
    updatedatavalue(updatebase, formname) {
      const data = updatebase
      data.token = localStorage.getItem('access_token')
      data.hospitalId = data.id
      data.hospitalName = data.name
      console.log(data)
      const that = this
      this.$refs[formname].validate((valid) => {
        if (valid) {
          $.ajax({
            method: 'put',
            headers: {
              'Content-Type': 'application/json; charset=utf-8',
              'Authorization': 'Bearer ' + localStorage.getItem('access_token')
            },
            url: '/updatehospital',
            data: JSON.stringify(data)
          }).then(function(res) {
            console.log('修改医院', res)
            if (res != undefined) {
              appConfig.okAlert('修改医院信息成功')
              that.getbasedata()
              that.centerDialogVisibleupdateDaima = false
              that.getbase = {}
            }
          })
        } else {
          return false
        }
      })
    }

    // 医院级别
    // levelDropdown() {
    //     var a = "HOSGRADE";
    //     $.ajax({
    //         method: "GET",
    //         url: '/api-his/his/commons/dictionary',
    //         params: {
    //             parent_type: a
    //         },
    //         headers: {
    //             'Content-Type': 'application/x-www-form-urlencoded',
    //             "Authorization": "Bearer " + localStorage.getItem("access_token")
    //         },
    //         withCredentials: true
    //     }).then((response) => {
    //         this.levelList = response.data;
    //     })
    // }
    // ,
    // 科室类型
    // getalltypes() {
    //     let that = this;
    //     $.ajax({
    //         method: "get",
    //         headers: {
    //             'Content-Type': 'application/json; charset=utf-8',
    //             "Authorization": "Bearer " + localStorage.getItem("access_token")
    //         },
    //         url: '/api-his/his/commons/dictionary?parent_type=DETP_TYPE',
    //     }).then(function (res) {
    //         res = res.data
    //         for (let i = 0; i < res.length; i++) {
    //             that.options.push(res[i])
    //         }
    //         that.choseoption = res
    //     });
    //
    // }
    // ,
    // 人员类型
    // gettype(){
    //     let that = this;
    //     $.ajax({
    //         method: "get",
    //         headers: {
    //             'Content-Type': 'application/json; charset=utf-8',
    //             "Authorization": "Bearer " + localStorage.getItem("access_token")
    //         },
    //         url: '/api-his/his/commons/dictionary?parent_type=PERSON_TYPE',
    //     }).then(function (res) {
    //         res = res.data
    //         that.roletype = res
    //     });
    // },
    // // 科室类型
    // getalldepts() {
    //     let that = this;
    //     $.ajax({
    //         method: "GET",
    //         headers: {
    //             'Content-Type': 'application/json; charset=utf-8',
    //             "Authorization": "Bearer " + localStorage.getItem("access_token")
    //         },
    //         url: '/api-b/deptmanage/hospitalId',
    //         data: null
    //     }).then(
    //         function (res) {
    //             res = res.data.data
    //             that.alldepts = res
    //         });
    // }
    // ,
  }
}
</script>

<style scoped>
.topLine {
  background-color: rgb(255, 255, 255);
  color: rgb(57, 68, 85);
  overflow: hidden;
  z-index: 9999;
  padding: 10px 20px;
  text-align: center;
  border-bottom: 10px solid rgb(242, 242, 242);
}

.blueDot {
  width: 15px;
  height: 15px;
  line-height: 30px;
  background-color: rgb(67, 128, 234);
  border-radius: 50%;
  float: left;
  margin-top: 15px;
}
</style>
